<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
 * @module Polymer Elements
 */
/**
 * g-tabpanels is a g-panels with g-tabs connected to it.
 *
 * Example:
 *
 *     <g-tabpanels selected="0">
 *       <div>One</div>
 *       <div>Two</div>
 *       <div>Three</div>
 *       <div>Four</div>
 *     </g-tabpanels>
 *
 * @class g-tabs
 * @extends g-selector
 */
-->
<link rel="import" href="g-tabs.html">
<link rel="import" href="g-panels.html">
<polymer-element name="g-tabpanels" extends="g-panels">
  <template>
    <link rel="stylesheet" polymer-scope="controller" href="css/g-tabpanels-controller.css" />
    <link rel="stylesheet" href="css/g-flex-layout.css" />
    <style>
      #container {
        position: relative;
      }
    </style>
    <g-tabs id="tabs" selected="{{selected}}" valueAttr="name"></g-tabs>
    <div id="container" flex>
      <shadow></shadow>
    </div>
  </template>
  <script>
    (function() {
      function capitalize(str) {
        return str.slice(0, 1).toUpperCase() + str.slice(1);
      }
      
      Polymer('g-tabpanels', {
        ready: function() {
          // TODO(sorvell): import styling from panels... this should be @host-ified
          this.installControllerStyles(this, this.elementElement);
          this.classList.add('flexbox', 'col');
          this.super();
        },
        initPanel: function(inPanel, inIndex) {
          var tab = document.createElement('div');
          tab.name = this.selectedValueForPanel(inPanel);
          tab.textContent = capitalize(tab.name);
          this.$.tabs.appendChild(tab);
          this.super(arguments);
        }
      });
    })();
  </script>
</polymer-element>
